import { Component, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { FilterDto } from '@/render/FilterRender'
import { divide } from 'lodash'
import { getOperateRecordList } from '@/api/system'
import type { OperateRecordDto } from '@/api/system/types'
import { getKeyToEnum, WorkChangeTypeCnEnum } from '@/const/enum'
import { Tag, Timeline, TimelineItem } from 'ant-design-vue'
import dayjs from 'dayjs'

@Component
export class WorkInfo extends TableRender {
    @Prop() userId!: number

    noFilterPadding = true

    recordList = [] as OperateRecordDto[]
    @Watch('userId', { immediate: true })
    handleWatchUserId() {
        this.reloadPage()
    }

    filterConfig() {
        return {
            type: {
                name: '变更记录',
                element: 'select',
                span: 12,
                options: getKeyToEnum(WorkChangeTypeCnEnum)
            }
        } as FilterDto
    }

    async reloadPage() {
        const data = this.getFilters()
        const res = await getOperateRecordList({
            userId: this.userId,
            type: data.type
        })
        this.recordList = res.data
    }

    render() {
        return (
            <div class="mt-20px">
                <div class="bg-white-dark-100 pl-10px mb-20px py-5px border-l-4px border-l-solid border-blue-default">工作信息</div>
                {super.renderFilter()}
                <div>
                    <Timeline>
                        {
                            this.recordList?.map(item => {
                                return <TimelineItem v-slots={{
                                    default: () => {
                                        return <div>
                                            <div class="text-sm text-gray-default mb-10px">{dayjs(item.createTime).format('YYYY-MM-DD hh:mm:ss')}</div>
                                            <div class="flex items-start">
                                                <Tag color={item.type === 2 ? 'error' : 'processing'}>
                                                    {WorkChangeTypeCnEnum[item.type]}
                                                </Tag>
                                                <div class="ml-10px">{item.operateContent}</div>
                                            </div>
                                        </div>
                                    }
                                }}>
                                </TimelineItem>
                            })
                        }
     
                    </Timeline>
                </div>
            </div>
        )
    }
}

export default toNative<{userId: number}, {}>(WorkInfo)